import Echarts from "@/components/echarts"
import { Button } from "antd"
import { useState,useRef, useEffect } from "react"
import pieOption from "../config/Pie/pieOption"
import pieOption2  from "../config/Pie/pieOption2"
import pieOption3 from "../config/Pie/pieOption3"
import pieOption4 from "../config/Pie/pieOption4"
import pieOption5 from "../config/Pie/pieOption5"
import "./index.less"
import { useDispatch } from "react-redux"
import { handlerBread } from "@/redux/actions"
import { FundViewOutlined, } from '@ant-design/icons';
const BreadData:breadType[] = [{
    icon: <FundViewOutlined />,
    label: "Echarts",
    herf: ''
}, {
    icon: undefined,
    label: "饼图",
    herf: ''
}]




export default function Chart(){
     const dispatch = useDispatch()
     let [Data,SetData] = useState( [120, 200, 150, 80, 70, 110, 130])

     function changeData(){
          SetData([99, 99, 99, 99, 99, 99, 99])
     }

     const PieChart = (ref:echarts.ECharts)=>{
        
     }
     const PieChart3 = (ref:echarts.ECharts)=>{
         return ref
     }

     useEffect(()=>{
          dispatch(handlerBread(BreadData))
     },[])
     return (
       <div className="Ecahrts_views flex">
          <Echarts  myOption={pieOption} width={"18.5%"} height={"280px"} className={"PieChart"} refResult={PieChart}  />
          <Echarts  myOption={pieOption2} width={"18.5%"} height={"280px"} className={"PieChart2"}  />
          <Echarts  myOption={pieOption3} width={"18.5%"} height={"280px"} className={"PieChart3"} refResult={PieChart3} />
          <Echarts  myOption={pieOption4} width={"18.5%"} height={"280px"} className={"PieChart4"}  />
          <Echarts  myOption={pieOption5} width={"18.5%"} height={"280px"} className={"PieChart4"}  />
       </div>
     )
}